Selecciones y join de datos en D3.js

IIC2026 2020-2

Selecciones en D3.js I

Selecciones y join de datos en D3.js

IIC2026 2020-2

Selecciones


Objeto de D3.js que se comporta como una colección de elementos HTML.

Selecciones


Objeto de D3.js que se comporta como una colección de elementos HTML.



            d3.select()
          

            d3.selectAll()
          

d3.select



            const seleccion = d3.select("p");
          

            const seleccion = d3.select(".importante");
          

            const seleccion = d3.select("#principal");
          

d3.select



            const seleccion = d3.select("p");
          

<body>
  <p>Soy un párrafo.</p>
  <p>¡Yo también!</p>
  <p>¡Hey! ¡Yo igual!</p>
</body>
          

d3.select



            const seleccion = d3.select(".importante");
          

<body>
  <p>Soy un párrafo no importante.</p>
  <p class="importante">Yo si soy importante.</p>
  <p class="importante">Yo también soy importante.</p>
</body>
          

d3.select



            const seleccion = d3.select("#principal");
          

<body>
  <h1>Soy un título.</h1>
  <p>Soy un párrafo.</p>
  <p id="principal">Pero yo soy el principal.</p>
</body>
          

d3.selectAll



            const seleccion = d3.selectAll("p");
          

<body>
  <p>Soy un párrafo.</p>
  <p>¡Yo también!</p>
  <p>¡Hey! ¡Yo igual!</p>
</body>
          

d3.selectAll



            const seleccion = d3.selectAll(".importante");
          

<body>
  <p>Soy un párrafo no importante.</p>
  <p class="importante">Yo si soy importante.</p>
  <p class="importante">Yo también soy importante.</p>
</body>
          

d3.selectAll



            const seleccion = d3.selectAll("#principal");
          

<body>
  <h1>Soy un título.</h1>
  <p>Soy un párrafo.</p>
  <p id="principal">Pero yo soy el principal.</p>
</body>
          

seleccion.attr



            seleccion.attr(atributo, valor)
          

Antes:


<body>
  <p>Soy un párrafo.</p>
  <p>¡Yo también!</p>
  <p>¡Hey! ¡Yo igual!</p>
</body>
          


            const seleccion = d3.selectAll("p");
            seleccion.attr("class", "parrafo");
          

Después:


<body>
  <p class="parrafo">Soy un párrafo.</p>
  <p class="parrafo">¡Yo también!</p>
  <p class="parrafo">¡Hey! ¡Yo igual!</p>
</body>
          

seleccion.style



            seleccion.style(propiedad, valor)
          

Antes:


<svg>
  <rect></rect>
  <rect></rect>
  <rect></rect>
</svg>
          


            const seleccion = d3.selectAll("rect");
            seleccion.style("fill", "red");
          

Después:


<svg>
  <rect style="fill: red"></rect>
  <rect style="fill: red"></rect>
  <rect style="fill: red"></rect>
</svg>
          

<svg>
  <rect style="fill: red"></rect>
  <rect style="fill: red"></rect>
  <rect style="fill: red"></rect>
</svg>
          

Es equivalente a:


            <svg>
              <rect fill="red"></rect>
              <rect fill="red"></rect>
              <rect fill="red"></rect>
            </svg>
          

Method chaining



            const seleccion = d3.selectAll("rect");
            seleccion.attr("x", 10);
            seleccion.attr("y", 50);
            seleccion.style("fill", "red");
          

Equivalente a:


            d3.selectAll("rect")
              .attr("x", 10)
              .attr("y", 50)
              .style("fill", "red");
          

Constantes o funciones



            d3.selectAll("rect")
              .attr("x", 10);
          

            d3.selectAll("rect")
              .attr("x", () => 10);
          

Constantes o funciones



            d3.selectAll("rect")
              .attr("x", (d, i, all) => 100 * i);
          

<svg>
  <rect x="0"></rect>
  <rect x="100"></rect>
  <rect x="200"></rect>
</svg>
          

seleccion.append



            seleccion.append(tipo)
          

Antes:


<body>
  <ul></ul>
  <ul></ul>
  <ul></ul>
</body>
          


            d3.selectAll("ul")
              .append("li");
          

Después:


<body>
  <ul>
    <li></li>
  </ul>
  <ul>
    <li></li>
  </ul>
  <ul>
    <li></li>
  </ul>
</body>
          

Antes:


<body>
  <ul></ul>
  <ul></ul>
  <ul></ul>
</body>
          


            d3.selectAll("ul")
              .append("li")
              .text("Primer ítem");
          

Después:


<body>
  <ul>
    <li>Primer ítem</li>
  </ul>
  <ul>
    <li>Primer ítem</li>
  </ul>
  <ul>
    <li>Primer ítem</li>
  </ul>
</body>
          

            const seleccionDeListas = d3.selectAll("ul");
            
            seleccionDeListas.append("li")
              .style("color", "red")
              .text("Primer ítem");

            seleccionDeListas.append("li")
              .style("color", "green")
              .text("Segundo ítem");
          

<body>
  <ul>
    <li style="color: red">Primer ítem</li>
    <li style="color: green">Segundo ítem</li>
  </ul>
  <ul>
    <li style="color: red">Primer ítem</li>
    <li style="color: green">Segundo ítem</li>
  </ul>
  <ul>
    <li style="color: red">Primer ítem</li>
    <li style="color: green">Segundo ítem</li>
  </ul>
</body>
          

Selecciones en D3.js I

Selecciones y join de datos en D3.js

IIC2026 2020-2


¡Deja tus preguntas en los comentarios!